<template>
	<div id='product' class='clearfix'>
		<div class="title">
			<h2>{{txt_h2}}</h2>
			<h3>{{txt_h3}}</h3>
			<span class="underline"></span>
			<p>{{txt_p}}</p>

		</div>
		<ul>

			<li v-for="(item,index) in imgs" :key="index">
				<div class="urls" >
					<img :src="item.srcs" alt="" />
				</div>
				
				<span>{{item.txt}}</span>
			</li>
		</ul>
	</div>

</template>

<script>
	export default {
		name: "product",
		data() {
			return {

				txt_h2: "美肌产品",
				txt_h3: "自主研发拥有成功备案的皮肤科功能型产品--净界",
				txt_p: "采用6大瑞士专利科技，以专利生物肽净炼技术成功提取超高纯浓度生物肽，为产品注入高科技能量。产品无人工合成香精色素、无人工防腐剂，更加安全、可靠、更契合更多肤质。",
				imgs: [{
						srcs: "../../../../static/imgs/img/t0.png",

						txt: "基础净护系列"

					},
					{
						srcs: "../../../../static/imgs/img/t1.png",
						txt: "原液系列"
					},
					{
						srcs: "../../../../static/imgs/img/t2.png",
						txt: "面膜系列"
					},
					{
						srcs: "../../../../static/imgs/img/t3.png",
						txt: "眼部系列"
					},
					{
						srcs: "../../../../static/imgs/img/t4.png",
						txt: "祛痘系列"
					},
					{
						srcs: "../../../../static/imgs/img/t5.png",
						txt: "敏感肌系列"
					},
					{
						srcs: "../../../../static/imgs/img/t6.png",
						txt: "脆弱肌系列"
					}

				]
			}
		}

	}
</script>

<style scoped lang="scss">
	#product {
		.title {
			padding-left: 283px;
			h2 {
				font-size: 48px;
				padding-bottom: 17px;
				font-family: SourceHanSansCN-Normal;
				color: #F5855F;
				line-height: 25px;
			}
			h3 {
				width: 448px;
				font-size: 35px;
				font-family: SourceHanSansCN-Light;
				color: #A0A0A0;
				padding-bottom: 24px;
			}
			.underline {
				display: block;
				width: 68px;
				height: 3px;
				background-color: #F5855F;
			}
			p {
				padding-top: 57px;
				width: 842px;
				font-size: 22px;
				font-family: SourceHanSansCN-Normal;
				color: #767676;
				line-height: 25px;
			}
		}
		ul {
			padding-top: 100px;
			padding-left: 195px;
			li {
				width: 361px;
				float: left;
				text-align: center;
				padding-bottom: 60px;
				.urls {
					width: 318px;
					height: 373px;
					margin-bottom: 10px;
					text-align: center;
					line-height: 373px;
				}
				span {
					width: 148px;
					height: 35px;
					border: 1px solid #F98B02;
					color: #F98B02;
					
				}
			}
		}
	}
</style>